<template>
  <apexchart type="bar" height="400" width="100%" :options="options" :series="series"
    @dataPointSelection="onDataPointSelection" />
</template>

<script setup>

const props = defineProps({
  series: {
    type: Array,
    required: true
  }
});

const emit = defineEmits(['dataPointSelection']);

const options = {
  chart: {
    type: 'bar',
  },
  plotOptions: {
    bar: {
      horizontal: false,
      columnWidth: '55%',
    },
  },
  dataLabels: {
    enabled: true,
    formatter: function (val) {
      return val + "m";
    }
  },
  xaxis: {
    type: 'category',
    labels: {
      rotate: -45,
      style: {
        fontSize: '12px'
      }
    }
  },
  yaxis: {
    title: {
      text: '耗时（分钟）'
    }
  },
  tooltip: {
    y: {
      formatter: function (val) {
        return val + " 分钟"
      }
    }
  },
  title: {
    text: 'TestRunner 耗时排名(top20)',
    align: 'center'
  }
};

const onDataPointSelection = (event, chartContext, config) => {
  emit('dataPointSelection', { event, chartContext, config });
};
</script>
